<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta charset="UTF-8">
    <title th:text="在线聊天室">在线聊天室</title>
    <script src="./js/jquery.min.js" ></script>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/roomchat.js"></script>
    <script src="./js/md5.js"></script>
    <link type="text/css" href="./css/litewebchat.min.css" rel="stylesheet" />
    <style>
        html,body{
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #box {
            width: 100%;
            height: 100%;
            display: flex;
            display: -webkit-flex; /* Safari */
        }

        #box .roomList {
            flex: 3;
            height: 100%;
            width: 300px;
            max-width: 400px;
            border-right-style: solid;
            border-right-color: #cccccc;
            border-right-width: 1px;
        }

        #box .chatView .msgList {
            width: 100%;
            height: 70%;
            overflow-y:auto;
            overflow-x:auto;
        }

        #box .chatView .useConsole {
            width: 100%;
            padding: 10px;
            border-top-color: #cccccc;
            border-top-style: solid;
            border-top-width: 1px;
        }

        .senderMsg {
            padding: 10px 5px 5px 0;
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="roomList">
            <a href="#" style="max-height: 430px" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
                <img style="margin: 0 auto" src="./img/defaultGroup.jpg" alt="twbs" width="72" height="72" class="rounded-circle flex-shrink-0">
                <div class="d-flex gap-2 w-100 justify-content-between" style="padding: 3px">
                    <div>
                        <h5 class="mb-0">在线聊天室1</h5>
                        <p class="mb-0 opacity-75 senderMsg">chenjunyu19: 以上就是全部的特性，以后有空再更</p>
                    </div>
                    <small class="opacity-50 text-nowrap">now</small>
                </div>
            </a>
        </div>
        <div id="msgViewBox" class="chatView" style="flex: 7">
            <div class="msgList">
            <!-- 主容器 -->
            <div class="lite-chatbox">

                <!-- cleft 左 -->
                <div class="cleft cmsg">
                    <img class="headIcon radius" ondragstart="return false;"  oncontextmenu="return false;" src="../img/A.jpg" />
                    <span class="name">chenjunyu19</span>
                    <span class="content">这是什么什么鬼？</span>
                </div>

                <!-- cright 右 -->
                <div class="cright cmsg">
                    <img class="headIcon radius" ondragstart="return false;"  oncontextmenu="return false;"  src="../img/B.jpg" />
                    <span class="name">SuperPaxxs</span>
                    <span class="content">LiteChat_Frame（轻聊天气泡框架），一个贼简洁 <del>(简单)</del> 、美观、易用的 HTML 聊天界面框架</span>
                </div>

                <div class="cright cmsg">
                    <img class="headIcon radius" ondragstart="return false;"  oncontextmenu="return false;"  src="../img/B.jpg" />
                    <span class="name">SuperPaxxs</span>
                    <span class="content">它简洁而不简单，能使你开发聊天界面更快速</span>
                </div>

                <div class="cleft cmsg">
                    <img class="headIcon radius" ondragstart="return false;"  oncontextmenu="return false;"  src="../img/A.jpg" />
                    <span class="name">chenjunyu19</span>
                    <span class="content">直接说，气泡是谁的？</span>
                </div>

                <div class="cright cmsg">
                    <img class="headIcon radius" ondragstart="return false;"  oncontextmenu="return false;"  src="../img/B.jpg" />
                    <span class="name">SuperPaxxs</span>
                    <span class="content">好吧，气泡css来自 <a href="http://i.intas.cn/" target="_blank">Haswikr的Blog</a> 的机器人气泡，我给白色的加了点边框 😝 </span>
                </div>

                <div class="cleft cmsg">
                    <img class="headIcon radius" ondragstart="return false;"  oncontextmenu="return false;"  src="../img/H.jpg" />
                    <span class="name"><span class="htitle admin">admin</span>Haswikr</span>
                    <span class="content">当初调色煞费苦心</span>
                </div>

                <div class="cleft cmsg">
                    <img class="headIcon radius" ondragstart="return false;"  oncontextmenu="return false;"  src="../img/O.jpg" />
                    <span class="name"><span class="htitle owner">owner</span>Sonui</span>
                    <span class="content">这设计真棒</span>
                </div>

                <div class="cleft cmsg">
                    <img class="headIcon radius" ondragstart="return false;"  oncontextmenu="return false;"  src="../img/A.jpg" />
                    <span class="name"><span class="htitle">menber123456789789</span>chenjunyu19</span>
                    <span class="content">那咋用啊？</span>
                </div>

                <div class="cright cmsg">
                    <img class="headIcon radius" ondragstart="return false;"  oncontextmenu="return false;"  src="../img/B.jpg" />
                    <span class="name">SuperPaxxs</span>
                    <span class="content">
                <del>诶哟少年你找对人了</del><br><br>
                如果只是使用，那非常简单。<br>
                <h2>使用指北</h2>
                1.引用css： litechat.css<br><br>
                &lt;link type=&quot;text/css&quot; href=&quot;//lab.morfans.cn/LiteWebChat_Frame/litewebchat.css&quot; rel=&quot;stylesheet&quot; /&gt;
                <br>或<br>
                &lt;link type=&quot;text/css&quot; href=&quot;//lab.morfans.cn/LiteWebChat_Frame/litewebchat.min.css&quot; rel=&quot;stylesheet&quot; /&gt;<br><br>
                2.创建一个 DIV ，用来容纳聊天对话，目的是不让 css 干扰页面其他内容：<br><br>
                &lt;div class=&quot;lite-chatbox&quot;&gt; <br>
                ...<br>
                &lt;/div&gt;<br><br>
                话说你就不会看下源码吗...<b>楼下就是特性演示</b>
            </span>
                </div>

                <div class="tips">
                    <span>Chenjunyu19 退出了聊天室并撩了你一把</span>
                </div>
                <div class="cleft cmsg">
                    <img class="headIcon radius" ondragstart="return false;"  oncontextmenu="return false;"  src="../img/A.jpg" />
                    <span class="name">空消息测试1</span>
                    <span class="content"></span>
                </div>

                <div class="cright cmsg">
                    <img class="headIcon radius" ondragstart="return false;"  oncontextmenu="return false;"  src="../img/B.jpg" />
                    <span class="name">空消息测试2</span>
                    <span class="content">&nbsp;</span>
                </div>
                <div class="cleft cmsg">
                    <img class="headIcon radius" ondragstart="return false;"  oncontextmenu="return false;"  src="../img/A.jpg" />
                    <span class="name">chenjunyu19</span>
                    <span class="content">注意，上面两条空消息的消息内容代码不一样</span>
                </div>

                <div class="cright cmsg">
                    <img class="headIcon" ondragstart="return false;"  oncontextmenu="return false;"  src="../img/B.jpg" />
                    <span class="name">SuperPaxxs</span>
                    <span class="content">头像换成方形请去掉 radius </span>
                </div>

                <div class="cleft cmsg">
                    <img class="headIcon" ondragstart="return false;"  oncontextmenu="return false;"  src="../img/A.jpg" />
                    <span class="name">chenjunyu19</span>
                    <span class="content">我是左边的方形头像</span>
                </div>

                <div class="cright cmsg">
                    <img class="headIcon radius" ondragstart="return false;"  oncontextmenu="return false;"  src="../img/B.jpg" />
                    <span class="name">图片消息</span>
                    <span class="content"><img src="../img/img2.png"></span>
                </div>

                <div class="cleft cmsg">
                    <img class="headIcon radius" ondragstart="return false;"  oncontextmenu="return false;"  src="../img/A.jpg" />
                    <span class="name">图片消息2</span>
                    <span class="content"><img src="../img/img.png"><br>
             图片带文字是可以的 <del>（废话）</del></span>
                </div>

                <div class="cright cmsg">
                    <img class="headIcon radius" ondragstart="return false;"  oncontextmenu="return false;"  src="../img/B.jpg" />
                    <span class="name">右边长消息</span>
                    <span class="content">我的消息真的超级长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长欸</span>
                </div>

                <div class="cleft cmsg">
                    <img class="headIcon radius" ondragstart="return false;"  oncontextmenu="return false;"  src="../img/A.jpg" />
                    <span class="name">左边长消息</span>
                    <span class="content">这么巧鸭，我的也超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超级长的欸</span>
                </div>

                <div class="tips">
                    <span class="tips-danger">系统消息：左/右边长消息被管理员批判一番……</span>
                </div>

                <div class="tips">
                    <span>系统消息：normal</span>
                </div>

                <div class="tips">
                    <span class="tips-primary">系统消息：primary</span>
                </div>

                <div class="tips">
                    <span class="tips-success">系统消息：success</span>
                </div>

                <div class="tips">
                    <span class="tips-info">系统消息：info</span>
                </div>

                <div class="tips">
                    <span class="tips-warning">系统消息：warning</span>
                </div>

                <div class="tips">
                    <span class="tips-danger">系统消息：danger</span>
                </div>



                <div class="cright cmsg">
                    <img class="headIcon radius" ondragstart="return false;"  oncontextmenu="return false;"  src="../img/B.jpg" />
                    <span class="name">带有超链接的消息测试</span>
                    <span class="content">当然是可以有超链接的。例子在这里：<br><a href="http://morfans.cn" target="_blank">你敢点我吗</a> ← 戳这里</span>
                </div>

                <div class="cleft cmsg">
                    <img class="headIcon radius" ondragstart="return false;"  oncontextmenu="return false;"  src="../img/A.jpg" />
                    <span class="name">全符号测试</span>
                    <span class="content">。，；？：！‘’“”@ˆ.,;?:!&#x27;&quot;〝〞﹫ˇ</span>
                </div>

                <div class="cleft cmsg">
                    <img class="headIcon radius" ondragstart="return false;"  oncontextmenu="return false;"  src="../img/A.jpg" />
                    <span class="name">全emoji测试</span>
                    <span class="content">😀😝🐂🍺</span>
                </div>

                <div class="cright cmsg">
                    <img class="headIcon radius" ondragstart="return false;"  oncontextmenu="return false;"  src="../img/B.jpg" />
                    <span class="name">&nbsp;</span>
                    <span class="content">当无昵时候需要 &amp;nbsp; 填充</span>
                </div>

                <div class="cright cmsg">
                    <img class="headIcon radius" ondragstart="return false;"  oncontextmenu="return false;"  src="../img/B.jpg" />
                    <span class="name">SuperPaxxs</span>
                    <span class="content">换行用 &lt;br&gt; ，HTML 你懂的..</span>
                </div>

                <div class="cleft cmsg">
                    <img class="headIcon radius" ondragstart="return false;"  oncontextmenu="return false;"  src="../img/A.jpg" />
                    <span class="name">chenjunyu19</span>
                    <span class="content">以上就是全部的特性，以后有空再更</span>
                </div>
            </div>
            <div id="sendMsg">

            </div>
        </div>
            <div class="useConsole">
                <textarea style="resize: none;" maxlength="2400" class="form-control" name="msgBox" id="msgBox" cols="30" rows="9"></textarea>
                <button id="btn-sendMsg" type="button" class="btn btn-primary" style="float: right; margin: 10px 0px 10px">发送</button>
            </div>
        </div>
    </div>
    <script>

    </script>
</body>
</html>